<script setup lang="ts">
import { ref } from "vue";

const ignoreChance = ref();
const emit = defineEmits(["close"]);
const onToMine = () => {
  uni.switchTab({ url: "/pages/mine/mine" });
};
defineExpose({
  open: () => {
    ignoreChance.value.open();
  },
  close: () => {
    ignoreChance.value.close();
  }
});
</script>

<template>
  <uv-popup ref="ignoreChance" mode="center" zIndex="999" bgColor="none">
    <view class="chance">
      <image
        src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_huangguan.png"
        class="icon"
      ></image>
      <view class="title">您的咨询权益已用完</view>
      <view class="desc">
        续费会员：可享尊贵VIP<br />国内最新AI法务模型<br />更多会员海量权益等着您
      </view>
      <t-button backgroundColor="#333333" width="180px" @click="onToMine"
        >立即续费</t-button
      >
    </view>
    <view
      class="icon_close"
      @click.stop="
        () => {
          emit('close');
          ignoreChance.value.close();
        }
      "
    ></view>
  </uv-popup>
</template>

<style lang="scss" scoped>
.chance {
  text-align: center;
  background: var(--bg-popup);
  width: 327px;
  height: 292px;
  box-sizing: border-box;
  padding-top: 62px;
  border-radius: 40rpx;
  position: relative;
  margin-top: 100rpx;
  .icon {
    position: absolute;
    width: 140rpx;
    height: 140rpx;
    top: -70rpx;
    left: 50%;
    margin-left: -70rpx;
  }
  .title {
    color: var(--color-text-default);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
  }
  .desc {
    color: var(--color-text-assist-1);
    font-size: 18px;
    margin-bottom: 24px;
    letter-spacing: 4px;
    line-height: 30px;
  }
}
</style>
